<template>
    <div class="addUserAuth-container">
        <b-container class="bv-example-row row-box">
            <!-- 购物车表单区域 -->
            <b-row align-h="center" class="my-userAuthInfo">
                <b-col cols="12" sm="12" md="11" lg="11">
                    <div class="userAuthInfo">
                        <div class="userAuth-title">
                            <h4>购物车</h4>
                        </div>
                    </div>
                    <div class="hasShopcar" v-if="shopcarList==''">
                        <a-empty style="padding-top:70px;"></a-empty>
                    </div>
                    <div class="hasShopcar" v-else>
                        <table class="tender-table table-hover">
                            <thead>
                                <tr>
                                    <th><Checkbox v-model="isCheckAll" @on-change="ChangeCheckAll(isCheckAll)"></Checkbox></th>
                                    <th>图片</th>
                                    <th>商品名称</th>
                                    <th>价格</th>
                                    <th>运费</th>
                                    <th>小计</th>
                                    <th>编辑</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="item in shopcarList" :key="item.sId">
                                    <td>
                                        <Checkbox v-model="item.sChecked" @on-change="onChange(item.sId, item.sChecked)"></Checkbox>
                                    </td>
                                    <td><router-link :to="'/goodsInfo/' + item.goods.gId">
                                    <img :src="item.mainPic" alt=""></router-link></td>
                                    <td>{{item.goods.gName}}</td>
                                    <td>￥{{item.sPrice}}</td>
                                    <td>￥{{item.sFire}}</td>
                                    <td>￥{{item.sTotal}}</td>
                                    <td><a href="javascript:void(0);" @click.prevent="deleteById(item.sId)">
                                        <Icon type="md-trash" /></a></td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="mybtn-info">
                            <div class="btn">
                            </div>
                            <div class="go-order">
                                <span class="total">共 {{count}} 件,</span>
                                <span class="total">总价：<span class="red">￥{{totalPrice}}</span></span>
                                <a href="javascript:void(0);" class="go" @click="goBuy">去结算</a>
                            </div>
                        </div>
                    </div>
                </b-col>
            </b-row>
            <!-- 选中商品下架的列表 -->
            <Modal
                v-model="modal1"
                title="以下商品已经下架啦，请重新选择">
                <div class="shelfGoods">
                    <div class="shelfGoods-item" v-for="item in shelfGoodsList" :key="item.gId">
                        <router-link :to="'/goodsInfo/' + item.gId">
                            <img :src="item.mainPic" alt="" class="space"></router-link>
                        <p>{{item.gTitle}}</p>
                    </div>
                </div>
            </Modal>
        </b-container>
    </div>
</template>

<script>

export default {
  name: 'shopCar',
  data () {
    return {
      uId: JSON.parse(localStorage.getItem('user')).uId,
      shopcarList: [], // 购物车列表
      count: 0, // 购物车选中商品数量
      isCheckAll: false, // 全选状态
      totalPrice: 0, // 选中商品总价
      shelfGoodsList: [], // 下架的商品列表
      modal1: false
    }
  },
  created () {
    this.findShopCar()
    this.findCountByUserId()
    this.findTotalPrice()
  },
  methods: {
    // 根据购物车id和选中标识修改商品为选中状态）
    onChange (id, isChecked) {
      // isChecked 为 true，修改此条购物车商品为选中状态
      if (isChecked === true) {
        this.$axios({
          url: 'shopcar/updateChecked/' + id,
          method: 'get',
          headers: {
            Authorization: localStorage.getItem('token')
          }
        }).then(res => {
          if (res.data.code === 200) {
            this.findCountByUserId()
            this.findTotalPrice()
          }
        }).catch(error => {
          console.log(error)
        })
      } else if (isChecked === false) {
        // 取消选中状态
        this.$axios({
          url: 'shopcar/updateNotCheck/' + id,
          method: 'get',
          headers: {
            Authorization: localStorage.getItem('token')
          }
        }).then(res => {
          if (res.data.code === 200) {
            this.findCountByUserId()
            this.findTotalPrice()
          }
        }).catch(error => {
          console.log(error)
        })
      }
    },
    // 设置全选或者取消全选
    ChangeCheckAll (isChecked) {
      console.log(isChecked)
      if (isChecked === true) {
        this.$axios({
          url: 'shopcar/updateCheckedAll/' + this.uId,
          method: 'get',
          headers: {
            Authorization: localStorage.getItem('token')
          }
        }).then(res => {
          if (res.data.code === 200) {
            this.findShopCar()
            this.findCountByUserId()
            this.findTotalPrice()
          }
        }).catch(error => {
          console.log(error)
        })
      } else if (isChecked === false) {
        // 取消全选状态
        this.$axios({
          url: 'shopcar/updateNotCheckAll/' + this.uId,
          method: 'get',
          headers: {
            Authorization: localStorage.getItem('token')
          }
        }).then(res => {
          if (res.data.code === 200) {
            this.findShopCar()
            this.findCountByUserId()
            this.findTotalPrice()
          }
        }).catch(error => {
          console.log(error)
        })
      }
    },
    // 根据用户id获取该用户的购物车商品列表
    findShopCar () {
      this.$axios({
        url: 'shopcar/findByUserId/' + this.uId,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.shopcarList = res.data.list
          this.shopcarList.forEach(item => {
            if (item.sChecked === 1) {
              item.sChecked = true
            } else {
              item.sChecked = false
            }
            this.$axios({
              url: 'goodsPicture/findMainPicByGoodsId/' + item.goods.gId,
              method: 'get'
            }).then(res => {
              if (res.data.code === 200) {
                // vue给对象新增属性并触发视图更新
                this.$set(item, 'mainPic', res.data.object.gpAddress)
              }
            }).catch(error => {
              console.log(error)
            })
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 根据购物车id删除此条购物车
    deleteById (id) {
      this.$axios({
        url: 'shopcar/deleteById/' + id,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.findShopCar()
          this.findCountByUserId()
          this.findTotalPrice()
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 获取用户选中的商品数量
    findCountByUserId () {
      this.$axios({
        url: 'shopcar/findCheckCountByUserId/' + this.uId,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.count = res.data.object
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 根据用户id计算用户选中的商品总价
    findTotalPrice () {
      this.$axios({
        url: 'shopcar/findTotalPrice/' + this.uId,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.totalPrice = res.data.object
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 点击去结算按钮判断选中商品的（是否下架）库存
    goBuy () {
      this.$axios({
        url: 'goods/checkHas/' + this.uId,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.shelfGoodsList = res.data.list
          if (this.shelfGoodsList.length !== 0) {
            this.shelfGoodsList.forEach(item => {
              this.$axios({
                url: 'goodsPicture/findMainPicByGoodsId/' + item.gId,
                method: 'get'
              }).then(res => {
                if (res.data.code === 200) {
                  this.$set(item, 'mainPic', res.data.object.gpAddress)
                }
              }).catch(error => {
                console.log(error)
              })
            })
            this.modal1 = true
          } else {
            this.$router.push({ path: '/confirmOrder' })
          }
        }
      }).catch(error => {
        console.log(error)
      })
    }
  }
}

</script>
<style scoped>
.shelfGoods-item {
    display:flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 8px;
}
.shelfGoods-item img {
    width: 45px;
    height: 45px;
}
.shelfGoods-item p {
    margin-bottom: 0;
}
.space {
    margin-right: 20px;
}
.total {
    font-size: 12px;
    columns: #4e4e4e;
}
.pad {
    margin-right: 10px;
}
.row-box{
    background: #fff;
    padding: 30px;
    margin-bottom: 30px;
    min-height: 520px;
}
.my-goodsInfo {
    margin-top: 20px;
}
.userAuth-title {
    text-align: center;
    margin-bottom: 50px;
}
.tender-table{
    width: 100%;
    border-collapse: collapse;
}
.tender-table tr{
    border-bottom:1px solid #eee;
    text-align: left;
}
.tender-table thead tr{
    border-top:1px solid #eee;
    border-bottom:2px solid #eee;
}
.tender-table th,.tender-table td{
    padding:7px 10px;
}
.table-hover thead tr{
    background-color: #f1f1f1;
}
.table-hover tbody tr:hover{
    background-color: #f1f1f1;
}
.tender-table img {
    width: 45px;
    height: 45px;
}
.mybtn-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}
.total {
    margin-right: 10px;
}
.red {
    color: #ef4238;
    font-size: 14px;
}
.go {
    display: inline-block;
    padding: 4px 8px;
    border: 2px solid skyblue;
    border-radius: 15px;
}
</style>
